<template>
  <div class="userManagement">
    <div>
      <el-form :inline="true" :model="form" class="form">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            v-model="form.query"
            placeholder="请输入要搜索的订单编号"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="typeUsers">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="订单管理" name="first">
            <div>
              <el-table :data="orderData" style="width: 100%">
                <el-table-column prop="orderId" width="180" label="订单编号"></el-table-column>
                <el-table-column prop="orderTime" label="订单创建时间"></el-table-column>
                <el-table-column prop="orderName" label="订单名称"></el-table-column>
                <el-table-column prop="oederContent" label="订单内容"></el-table-column>
                <el-table-column prop="orderPrice" label="订单金额"></el-table-column>
                <el-table-column prop="orderAddress" label="收货地址"></el-table-column>
                <el-table-column prop="orderPhone" label="联系电话" width="140"></el-table-column>
                <el-table-column prop="orderState" label="状态" ></el-table-column>
                <el-table-column label="操 作" width="160">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      class="btnNot"
                    >已发货</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top:20px;">
              <el-pagination
                :current-page="currentOrderPage"
                @current-change="handleCurrentOrderChange"
                background
                layout="prev, pager, next"
                :total="orderTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderTotal: 0,
      currentOrderPage: 1,
      activeName: "first",
      form: {
        query: ""
      },
      orderData: [
      ]
    };
  },
  methods: {
     onSearch(){
      let that = this;
      let orderId = that.form.query;
      let orderData=[];
      that.$axios
        .post("/order/queryOrderInfoByOrderId?orderId=" + orderId, {})
        .then(function(response) {
          console.log(response);
          that.orderTotal = 1;
          orderData.push(response.data.data)//将后台返回的对象转换成数组
          that.orderData = orderData;
          
        }).catch(function(error) {
          console.log(error);
        });
    },
    handleEdit(index, row) {
      let that = this;
      that.$axios.post("/order/orderUpdate", {
        orderId: row.orderId,
        userId: row.userId,
        shoesId:row.shoesId,
        orderState: '已发货',
        oederContent: row.oederContent,
        orderAddress: row.orderAddress,
        orderName: row.orderName,
        orderPhone: row.orderPhone,
        orderPrice: row.orderPrice,
        orderShoesImage: row.orderShoesImage,
      }).then(function(response) {
        alert("编辑成功！");
        that.orderDataGet();
      })
    },
    handleCurrentOrderChange(val) {
      let that = this;
      that.currentOrderPage = val;
      that.orderDataGet();
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    orderDataGet() {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/storeOrder/queryStoreOrdersInfoByUserId?userId=" + userId, {})
        .then(function(response) {
          console.log(response);
          that.orderTotal = response.data.data.total;
          that.orderData = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
   
  },
  created() {
    let that = this;
    that.orderDataGet();
  }
};
</script>
<style scoped>
.userManagement .input {
  width: 600px;
}
.userManagement >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.userManagement >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.userManagement >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.userManagement .btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
.userManagement >>> .el-pager li:not(.disabled).active {
  background-color: #e6a23c;
}
</style>